<template>
  <div class="team-info-del">
    <!-- 这里把 span 改为 div，避免行内元素包裹块级元素导致布局异常 -->
    <div v-if="props.teamInfo && (props.teamInfo.team || props.teamInfo.teamName)" style="width: 100%">
      <div class="team-meta">
        <el-tag size="large">{{ getName(props.teamInfo?.isLeader) }}</el-tag>
        <span class="team-id">所属分组：{{ props.teamInfo?.team?.group?.groupName }}</span>
        <div class="team-actions">
          <el-button v-if="isLeader && new Date(props.teamInfo?.team?.group?.endTime) > new Date()" type="primary" plain size="large" @click="onEditTeam">编辑队伍信息</el-button>
          <el-button v-else-if="!isLeader && new Date(props.teamInfo?.team?.group?.endTime) > new Date()" type="primary" plain size="large" @click="onExitTeam">退出队伍</el-button>
        </div>
      </div>
      <div class="summary-content">
        <span class="team-title">毕业设计名称：{{ props.teamInfo?.team?.teamName || props.teamInfo?.teamName }}</span>
        <span class="team-title">简介：{{ props.teamInfo?.team?.summary }}</span>
      </div>
    </div>
  </div>
</template>
<script setup>
import {  getCurrentInstance,defineProps, ref, computed } from 'vue'
const { proxy } = getCurrentInstance()
import { exitTeam } from '@/api/team'
import { useRouter } from 'vue-router'
const router = useRouter()
const props = defineProps({
  teamInfo: { type: Object, default: () => ({}) },
  currentStudentId: { type: Number, required: true }
})

const isLeader = computed(() => props.teamInfo?.team?.studentTeams?.find((st) => st.isLeader === '1' && st.studentId === props.currentStudentId))

function getName(id) {
  if (id == 1) {
    return '队长'
  } else {
    return '队员'
  }
}
function onExitTeam() {
  const info = {
    teamId: props.teamInfo?.team?.teamId,
    studentId: props.currentStudentId
  }
  proxy.$modal
    .confirm('是否确认退出队伍？')
    .then(function () {
      return exitTeam(info)
    })
    .then(() => {
      proxy.$modal.msgSuccess('退出成功')
      router.push({
        path: '/index/student'
      })
    })
    .catch(() => {})
}
function onEditTeam() {
  router.push({
    path: '/student/createteam'
  })
}
</script>
<!-- css样式 -->
<style scoped>
.team-info-del {
  width: 100%;
  background-color: white;
  border-radius: 10px;
  padding: 2%;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.team-meta {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 12px;
}

.team-id {
  margin-left: 10px;
  color: #909399; /* 组号改为灰色 */
}

.summary-content {
  display: flex;
  flex-direction: column;
}

.team-title {
  display: inline-block;
  margin-top: 8px; /* 缩小与上方标签的间距 */
  font-weight: 400;
  color: #5a5b5e;
}

.team-actions {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 16px; /* 两个按钮之间间距更大一点 */
  margin-left: auto; /* 关键：把自身推到这一行的最右侧 */
}

.team-actions :deep(.el-button) {
  padding: 10px 18px;
  font-size: 16px;
}
</style>
